<template>
    <el-row :gutter="20">
        <el-col :span="5">
            <FixedHeightVue>
                <StudentList v-model:student="student" />
            </FixedHeightVue>
        </el-col>
        <el-col :span="19">
            <FixedHeightVue v-if="jedget">

                <!-- 个人信息 -->
                <div class="student_info">
                    <div class="img"></div>
                    <div class="info_item">
                        <span>姓名：</span>
                        <span>{{ student.userName }}</span>
                    </div>
                    <div class="info_item">
                        <span>性别：</span>
                        <span>{{ student.gender == 0 ? '男' : '女' }}</span>
                    </div>
                    <div class="info_item">
                        <span>电话号码：</span>
                        <span>{{ student.phone }}</span>
                    </div>
                    <div class="info_item">
                        <span>邮箱：</span>
                        <span>{{ student.email ? student.email : '无' }}</span>
                    </div>
                </div>
                <!-- 图表区 -->
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="top">
                            <el-progress type="circle" :percentage="percentageComplete" width="250" stroke-width="30" />
                            <div class="echart_title">作业提交率</div>
                        </div>
                        <div class="bottom"></div>
                    </el-col>
                    <el-col :span="18">
                        <div class="rigth"></div>
                    </el-col>
                </el-row>

            </FixedHeightVue>
            <!-- 没选择学生 -->
            <MyError title="请选中右边需要查看的学生" v-else></MyError>
        </el-col>
    </el-row>
</template>

<script setup>
import { ref, onMounted, computed } from "vue"
import * as echarts from 'echarts';

import { baseUrl_1, baseUrl_2 } from "@/utils/base64Img";

import MyError from "@/views/MyError.vue";
import { ElMessage } from "element-plus";
import { getStudentStatisticsRightApi, getStudentStatisticsTopApi, } from "@/api/index";

import FixedHeightVue from "@/components/base/FixedHeight.vue";
import StudentList from '@/views/teacher/mycourse/components/StudentList'

// 当前选择的学生
const student = ref({})

const jedget = computed(() => {
    const bool = Object.keys(student.value).length > 0;
    console.log("🚀 ~ jedget ~ bool:", bool)
    if (bool) {
        // 调用获取数据
        getStudentStatisticsRight()
        getStatisticsTopStu()

    }
    return bool;
})


const initEcharts = () => {
    // 饼图的逻辑
    var chartDom = document.querySelector('.bottom');
    var myChart = echarts.init(chartDom);
    const piePatternSrc = baseUrl_1;
    const bgPatternSrc = baseUrl_2;
    const piePatternImg = new Image();
    piePatternImg.src = piePatternSrc;
    const bgPatternImg = new Image();
    bgPatternImg.src = bgPatternSrc;
    const option = {
        backgroundColor: {
            image: bgPatternImg,
            repeat: 'repeat'
        },
        title: {
            text: '作业正确率',
            textStyle: {
                color: '#235894'
            }
        },
        tooltip: {},
        series: [
            {
                name: '作业率',
                type: 'pie',
                selectedMode: 'single',
                selectedOffset: 20,
                clockwise: true,
                radius: '70%',
                avoidLabelOverlap: false,
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: accuracy.value, name: '正确率' },
                    { value: 100 - accuracy.value, name: '错误率' },
                ],
                itemStyle: {
                    opacity: 0.7,
                    color: {
                        image: piePatternImg,
                        repeat: 'repeat'
                    },
                    borderWidth: 3,
                    borderColor: '#235894'
                }
            }
        ]
    };
    option && myChart.setOption(option);
}

// 学生顶部的数据统计
const percentageComplete = ref(null);
// 正确率
const accuracy = ref(null);
const getStatisticsTopStu = async () => {
    const res = await getStudentStatisticsTopApi({
        userId: student.value.id
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    percentageComplete.value = res.data.percentageComplete
    accuracy.value = res.data.accuracy
}

// 最近七天时间
const time = ref([])
const commentTime = () => {
    const date = new Date()
    const day = date.getDate()
    const month = date.getMonth()
    const year = date.getFullYear()
    for (let i = 0; i < 7; i++) {
        time.value.push(new Date(year, month, day - i).toLocaleDateString())
    }
}
// 学生右边的图表
const statisticsRightDataStu = ref([
])
const getStudentStatisticsRight = async () => {
    const res = await getStudentStatisticsRightApi({
        userId: student.value.id
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        })
        return;
    }
    statisticsRightDataStu.value = res.data.map(line => {
        return {
            name: line.courseName,
            data: line.scoreList,
            type: 'line',
            smooth: true
        }
    })
    console.log("🚀 ~ getStudentStatisticsRight ~ statisticsRightDataStu:", statisticsRightDataStu.value)
    myChartFunStu()
    initEcharts()
}
// 初始化echarts实例 学生
const myChartFunStu = () => {
    // echarts配置
    const option = {
        xAxis: {
            type: 'category',
            data: [1, 2, 3, 4, 5, 6, 7],
            name: "最近七次课程提交作业分数",
            nameLocation: "middle",
            nameTextStyle: {
                fontStyle: "normal",
                fontWeight: "bold",
                fontSize: 18
            },
            nameGap: 32
        },
        legend: {
            type: 'plain',
            right: 30,
            top: 20
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                symbol: ['none', 'arrow'],//只在末端显示箭头
                lineStyle: {
                    type: 'solid',
                    color: '#409eff',
                    // ...
                }
            },
            axisLabel: {
                show: true // 显示坐标轴标签
            },
            axisTick: {
                show: true // 显示刻度线
            }
        },
        tooltip: {
            trigger: "item",
            axisPointer: {
                type: "cross"
            }
        },
        series: statisticsRightDataStu.value && statisticsRightDataStu.value.length > 0 ? statisticsRightDataStu.value : [{
            name: '无数据',
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'line',
            smooth: true
        }
        ]
    }
    const myChart = echarts.init(document.querySelector('.rigth'));
    option && myChart.setOption(option);
}
onMounted(() => {
    commentTime()
})

</script>

<style lang="scss" scoped>
.student_info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px #0000001a;

    .img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #ccc;
    }

    .info_item {
        margin: 0 20px;

        span {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
}

.top,
.bottom {
    width: 100%;
    height: 315px;
    background-color: #fff;
    box-shadow: 0 2px 12px #0000001a;
    border-radius: 10px;

    .echart_title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
}

.top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom {
    margin-top: 8px;
}

.rigth {
    width: 100%;
    height: 639px;
    background-color: #fff;
    box-shadow: 0 2px 12px #0000001a;
    border-radius: 10px;
}
</style>